<h3 *ngIf="languages.length === 0">Loading...</h3>
<!-- async pipe is another option to handle request loading -->
<div *ngIf="languages.length > 0">
  <h3>Angular 5 Forms</h3>
  <form #employeeForm="ngForm" novalidate (ngSubmit)="submitForm(employeeForm)">

    <!-- <div class="form-group" [class.has-error]="firstName.invalid && firstName.touched"> -->
    <div class="form-group" [ngClass]="{'has-error': firstName.invalid && (firstName.touched || firstName.dirty)}">
      <label class="control-label">First Name</label>
      <input #firstName="ngModel" pattern="...+" required type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName">
      <div *ngIf="firstName.invalid && (firstName.touched || firstName.dirty)" class="alert alert-danger">
        <span *ngIf="firstName.errors.required">First Name is required</span>
        <span *ngIf="firstName.errors.pattern">and must be at least 3 characters.</span>
      </div>
    </div>

    <!-- <div class="form-group"> -->
    <!-- <label>First Name</label> -->
    <!-- 2-way binding, either below -->
    <!-- <input type="text" class="form-control" required name="firstName" [ngModel]="model.firstName" (ngModelChange)="model.firstName=$event">       -->
    <!-- <input type="text" class="form-control" required name="name" [(ngModel)]="model.firstName"> -->
    <!-- this is used if UI value is a little different from model. e.g, Capitalize first letter for the model -->
    <!-- <input type="text" class="form-control" required name="firstName" [ngModel]="model.firstName" (ngModelChange)="firstNameToUpperCase($event)"> -->
    <!-- </div> -->
    <div class="form-group">
      <label>Last Name</label>
      <!-- no binding -->
      <!-- <input type="text" class="form-control" required name="lastName" ngModel> -->
      <!-- one way binding(model to UI) -->
      <!-- <input type="text" class="form-control" required name="lastName" [ngModel]="model.lastName"> -->

      <!-- 2 way binding -->
      <input type="text" class="form-control" required name="lastName" [(ngModel)]="model.lastName">
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" name="isFullTime" [(ngModel)]="model.isFullTime"> Full Time Employee
      </label>
    </div>

    <label>Payment Type</label>
    <div class="radio">
      <label>
        <input type="radio" name="paymentType" value="w2" checked [(ngModel)]="model.paymentType"> W2
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="paymentType" value="1099" [(ngModel)]="model.paymentType"> 1099
      </label>
    </div>

    <!-- <div class="form-group" [class.has-error]="hasPrimaryLanguageError"> -->
    <div class="form-group" [ngClass]="{'has-error': hasPrimaryLanguageError}">
      <label class="control-label">Primary Language</label>
      <select class="form-control" #primaryLanguage name="primaryLanguage" (blur)="validatePrimaryLanguage(primaryLanguage.value)"
        (change)="validatePrimaryLanguage(primaryLanguage.value)" [(ngModel)]="model.primaryLanguage">
        <option value="default">Select a Language...</option>
        <option *ngFor="let lang of languages">
          {{ lang }}
        </option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit" [disabled]="employeeForm.invalid || primaryLanguage.value==='default'">Ok</button>

  </form>

  <h3>Data binding</h3>
  <p>Model: {{ model | json }}</p>
  <br>
  <p>Angular: {{ employeeForm.value | json }}</p>

  <h3>Form property</h3>

  <h4>Value Changed</h4>
  <p>form.pristine（从未填写过数据，可能 focus 但就是没写过数据）: {{ employeeForm.pristine }}</p>
  <p>form.dirty: {{ employeeForm.dirty }}</p>

  <h4>Visited</h4>
  <p>form.touched（鼠标曾经 focus 过，在 blur 时候为 true）: {{ employeeForm.touched }}</p>
  <p>form.untouched: {{ employeeForm.untouched }}</p>

  <h4>Validity</h4>
  <p>form.valid（required 等通过）: {{ employeeForm.valid }}</p>
  <p>form.invalid: {{ employeeForm.invalid }}</p>
  <p>firstName.errors: {{ firstName.errors | json }}</p>
</div>
